<template>
  <svg class="animated-line" :style="svgStyle">
    <!-- 基础连线 -->
    <line
      :x1="startPoint.x"
      :y1="startPoint.y"
      :x2="endPoint.x"
      :y2="endPoint.y"
      :stroke="lineColor"
      :stroke-width="lineWidth"
      stroke-linecap="round"
      :opacity="baseOpacity"
    />
    
    <!-- 电流特效 -->
    <defs v-if="effect?.type === 'current' && effect.enabled">
      <linearGradient :id="`current-gradient-${elementId}`" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" :stop-color="effect.color" stop-opacity="0" />
        <stop offset="50%" :stop-color="effect.color" :stop-opacity="effect.opacity" />
        <stop offset="100%" :stop-color="effect.color" stop-opacity="0" />
      </linearGradient>
    </defs>
    
    <!-- 电流流动效果 -->
    <line
      v-if="effect?.type === 'current' && effect.enabled"
      :x1="startPoint.x"
      :y1="startPoint.y"
      :x2="endPoint.x"
      :y2="endPoint.y"
      :stroke="`url(#current-gradient-${elementId})`"
      :stroke-width="effect.size"
      stroke-linecap="round"
      :style="currentAnimationStyle"
    />
    
    <!-- 水流特效 -->
    <defs v-if="effect?.type === 'water' && effect.enabled">
      <linearGradient :id="`water-gradient-${elementId}`" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" :stop-color="effect.color" stop-opacity="0" />
        <stop offset="30%" :stop-color="effect.color" :stop-opacity="effect.opacity * 0.5" />
        <stop offset="70%" :stop-color="effect.color" :stop-opacity="effect.opacity" />
        <stop offset="100%" :stop-color="effect.color" stop-opacity="0" />
      </linearGradient>
    </defs>
    
    <!-- 水流效果 -->
    <line
      v-if="effect?.type === 'water' && effect.enabled"
      :x1="startPoint.x"
      :y1="startPoint.y"
      :x2="endPoint.x"
      :y2="endPoint.y"
      :stroke="`url(#water-gradient-${elementId})`"
      :stroke-width="effect.size"
      stroke-linecap="round"
      :style="waterAnimationStyle"
    />
    
    <!-- 方向箭头 -->
    <defs v-if="effect?.type === 'arrow' && effect.enabled">
      <marker
        :id="`arrow-${elementId}`"
        markerWidth="10"
        markerHeight="10"
        refX="9"
        refY="3"
        orient="auto"
        markerUnits="strokeWidth"
      >
        <path
          d="M0,0 L0,6 L9,3 z"
          :fill="effect.color"
          :opacity="effect.opacity"
        />
      </marker>
    </defs>
    
    <!-- 带箭头的连线 -->
    <line
      v-if="effect?.type === 'arrow' && effect.enabled"
      :x1="startPoint.x"
      :y1="startPoint.y"
      :x2="endPoint.x"
      :y2="endPoint.y"
      :stroke="effect.color"
      :stroke-width="effect.size"
      stroke-linecap="round"
      :marker-end="`url(#arrow-${elementId})`"
    />
    
    <!-- 脉冲特效 -->
    <line
      v-if="effect?.type === 'pulse' && effect.enabled"
      :x1="startPoint.x"
      :y1="startPoint.y"
      :x2="endPoint.x"
      :y2="endPoint.y"
      :stroke="effect.color"
      :stroke-width="effect.size"
      stroke-linecap="round"
      :opacity="effect.opacity"
      :style="pulseAnimationStyle"
    />
    
    <!-- 虚线特效 -->
    <defs v-if="effect?.type === 'dash' && effect.enabled">
      <pattern
        :id="`dash-pattern-${elementId}`"
        patternUnits="userSpaceOnUse"
        width="8"
        height="1"
      >
        <rect width="4" height="1" :fill="effect.color" :opacity="effect.opacity" />
      </pattern>
    </defs>
    
    <!-- 虚线效果 -->
    <line
      v-if="effect?.type === 'dash' && effect.enabled"
      :x1="startPoint.x"
      :y1="startPoint.y"
      :x2="endPoint.x"
      :y2="endPoint.y"
      :stroke="`url(#dash-pattern-${elementId})`"
      :stroke-width="effect.size"
      stroke-linecap="round"
      :style="dashAnimationStyle"
    />
    
    <!-- 渐变特效 -->
    <defs v-if="effect?.type === 'gradient' && effect.enabled">
      <linearGradient :id="`gradient-${elementId}`" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" :stop-color="effect.color" stop-opacity="0" />
        <stop offset="25%" :stop-color="effect.color" :stop-opacity="effect.opacity * 0.3" />
        <stop offset="50%" :stop-color="effect.color" :stop-opacity="effect.opacity" />
        <stop offset="75%" :stop-color="effect.color" :stop-opacity="effect.opacity * 0.3" />
        <stop offset="100%" :stop-color="effect.color" stop-opacity="0" />
      </linearGradient>
    </defs>
    
    <!-- 渐变效果 -->
    <line
      v-if="effect?.type === 'gradient' && effect.enabled"
      :x1="startPoint.x"
      :y1="startPoint.y"
      :x2="endPoint.x"
      :y2="endPoint.y"
      :stroke="`url(#gradient-${elementId})`"
      :stroke-width="effect.size"
      stroke-linecap="round"
      :style="gradientAnimationStyle"
    />
    
    <!-- 连线标签 -->
    <text
      v-if="lineLabel"
      :x="(startPoint.x + endPoint.x) / 2"
      :y="(startPoint.y + endPoint.y) / 2 - 10"
      text-anchor="middle"
      font-size="12"
      fill="#333"
      class="line-label"
    >
      {{ lineLabel }}
    </text>
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { LineEffect } from '@/types/circuitDiagram'

// Props
interface Props {
  startPoint: { x: number; y: number }
  endPoint: { x: number; y: number }
  lineColor?: string
  lineWidth?: number
  effect?: LineEffect
  lineLabel?: string
  elementId: string
}

const props = withDefaults(defineProps<Props>(), {
  lineColor: '#000',
  lineWidth: 2,
  effect: undefined,
  lineLabel: '',
  elementId: ''
})

// 计算属性
const svgStyle = computed(() => ({
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  pointerEvents: 'none'
}))

const baseOpacity = computed(() => {
  if (props.effect?.enabled) {
    return 0.3 // 有特效时基础连线透明度降低
  }
  return 1
})

// 电流动画样式
const currentAnimationStyle = computed(() => {
  if (!props.effect || props.effect.type !== 'current') return {}
  
  const direction = props.effect.direction === 'backward' ? 'reverse' : 'normal'
  const duration = props.effect.speed
  
  return {
    animation: `current-flow-${props.elementId} ${duration}ms linear infinite ${direction}`,
    filter: `blur(${props.effect.intensity}px)`
  }
})

// 水流动画样式
const waterAnimationStyle = computed(() => {
  if (!props.effect || props.effect.type !== 'water') return {}
  
  const direction = props.effect.direction === 'backward' ? 'reverse' : 'normal'
  const duration = props.effect.speed
  
  return {
    animation: `water-flow-${props.elementId} ${duration}ms ease-in-out infinite ${direction}`,
    filter: `blur(${props.effect.intensity * 0.5}px)`
  }
})

// 脉冲动画样式
const pulseAnimationStyle = computed(() => {
  if (!props.effect || props.effect.type !== 'pulse') return {}
  
  const duration = props.effect.speed
  
  return {
    animation: `pulse-${props.elementId} ${duration}ms ease-in-out infinite`,
    filter: `blur(${props.effect.intensity * 0.3}px)`
  }
})

// 虚线动画样式
const dashAnimationStyle = computed(() => {
  if (!props.effect || props.effect.type !== 'dash') return {}
  
  const direction = props.effect.direction === 'backward' ? 'reverse' : 'normal'
  const duration = props.effect.speed
  
  return {
    animation: `dash-move-${props.elementId} ${duration}ms linear infinite ${direction}`,
    filter: `blur(${props.effect.intensity * 0.2}px)`
  }
})

// 渐变动画样式
const gradientAnimationStyle = computed(() => {
  if (!props.effect || props.effect.type !== 'gradient') return {}
  
  const direction = props.effect.direction === 'backward' ? 'reverse' : 'normal'
  const duration = props.effect.speed
  
  return {
    animation: `gradient-flow-${props.elementId} ${duration}ms ease-in-out infinite ${direction}`,
    filter: `blur(${props.effect.intensity * 0.4}px)`
  }
})
</script>

<style scoped>
.animated-line {
  overflow: visible;
}

.line-label {
  font-family: Arial, sans-serif;
  pointer-events: none;
}

/* 动态生成动画样式 */
:deep(.animated-line) {
  --current-flow-animation: current-flow;
  --water-flow-animation: water-flow;
  --pulse-animation: pulse;
  --dash-move-animation: dash-move;
  --gradient-flow-animation: gradient-flow;
}

/* 电流流动动画 */
@keyframes current-flow {
  0% { stroke-dasharray: 0, 100; }
  50% { stroke-dasharray: 50, 50; }
  100% { stroke-dasharray: 100, 0; }
}

/* 水流动画 */
@keyframes water-flow {
  0%, 100% { opacity: 0.3; stroke-dasharray: 0, 100; }
  50% { opacity: 1; stroke-dasharray: 50, 50; }
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% { opacity: 0.5; stroke-width: 2px; }
  50% { opacity: 1; stroke-width: 4px; }
}

/* 虚线移动动画 */
@keyframes dash-move {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 8; }
}

/* 渐变流动动画 */
@keyframes gradient-flow {
  0% { stroke-dasharray: 0, 100; }
  50% { stroke-dasharray: 50, 50; }
  100% { stroke-dasharray: 100, 0; }
}
</style> 